<template>
  <div class="Ranking">
    <div class="tops">
      <div class="first">1st</div>
      <div class="img">
        <img :src="listss.filepath" alt="" />
        <p>{{ listss.name }}</p>
      </div>
      <div class="jifen">{{listss.integral}}</div>
    </div>
    <div class="main">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="index"
          @click="
            tab(item.id);
            reds(index);
          "
          class="nav"
          :class="{ red: changeRed == index }"
        >
          {{ item.tab }}
        </li>
      </ul>
      <div class="show">
        <div class="rankings" v-for="(item, index) in lists" :key="index" @click="jieshao(item.id)">
          <div class="kings">{{ index + 1 }}</div>
          <div class="tou">
            <dl>
              <dt><img :src="item.filepath" /></dt>
              <dd class="name"><span class="wid">{{ item.name }}</span><img v-show="item.sex =='2'"  src="../assets/xb.png"><img v-show="item.sex =='1'"  src="../assets/nan.png"></dd>
              <dd class="kemu">
                <span>{{ item.subname }}</span> <span>教龄： 5年</span>
              </dd>
            </dl>
          </div>
          <div class="jf">积分：<span>{{item.integral}}</span></div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="index" @click="index()">
        <img src="../assets/index.png" alt="" />
        <p>首页</p>
      </div>
      <div @click="phb()">
        <img src="../assets/xpaihang.png" alt="" />
        <p style="color: #d8393e">排行榜</p>
      </div>
      <div @click="center()">
        <img src="../assets/wmy.png" alt="" />
        <p>个人中心</p>
      </div>
    </div>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  text-align: center;
}
.name img{vertical-align: middle;margin-left: 0.8rem;margin-right:0.5rem;width: 20px;height: 20px;padding-bottom: 0.2rem;}
.wid{width: 3rem;display:inline-block}
.tops {
  background: #d62c32;
  display: flex;
  justify-content: space-around;
  color: #fff;
  margin-top: 0;
  padding: 2rem 0;
}

li {
  list-style: none;
  margin-right: 20px;
}
.main {
  margin-bottom: 5rem;
}
.main ul {
  display: flex;
  justify-content: space-around;
  width: 90%;
  margin: 0 auto;
  padding: 1rem 0.5rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
 box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  color: #ccc;
  font-size: 0.8rem;
  font-weight: 300;
}
.show {
  width: 90%;
  margin: 0 auto;
  margin-top: 1rem;
}
.red {
  color: red;
}
.show :first-child.rankings {
  background-color: #d62c32;
  color: #fff;
}
.show :first-child.rankings .kemu span {
  font-size: 0.2rem;
  border-radius: 0.8rem;
  background-color: salmon;
  padding: 1px 2px;
  color: #fff;
}
.show :first-child.rankings .jf span {
  color: #fff;
}
.rankings {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  box-shadow: #ccc 1px 1px 1px;
  border: 1px solid #ccc;
  border-top: 0;
}
.kings {
  widows: 2rem;
  text-align: center;
  padding: 0 1rem;
  line-height: 48px;
}
.rankings .tou dl {
  overflow: hidden;
  width: 11rem;
}
.rankings .tou dl dt {
  float: left;

  height: 3rem;
  width: 3rem;
  border-radius: 3rem;
}
.rankings .tou dl dt img {
  width: 3rem;height: 3rem;
  border-radius: 3rem;
}
.rankings .tou dl dd {
  float: right;
  width: 7rem;
  margin-top: 0.2rem;
  text-align: left;
}
.rankings .jf {
  font-size: 0.5rem;
  padding-right: 10px;
  width: 5rem;
  text-align: left;
}
.rankings .jf span {
  font-size: 2rem;
  font-weight: 300;
  color: orange;
}
.rankings .kemu span {
  font-size: 0.2rem;
  border-radius: 0.8rem;

  padding: 1px 2px;
  color: #ccc;
}
.rankings .name {
  font-size: 0.8rem;
}
.tops img {
  width: 4rem;
  height: 4rem;
  border-radius: 4rem;
}
.tops .first,
.tops .jifen {
  line-height: 89px;width: 3rem;
}
.footer {
  display: flex;
  justify-content: space-around;
  font-size: 0.8rem;
  text-align: center;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 5px 0;
}
.footer div {
  text-align: center;
}
.footer img {
  display: block;
  width: 2rem;
  margin: 0 auto;
}
</style>
<script>
let obj = [
  { tab: "语文组", id: "1" },
  { tab: "数学组", id: "2" },
  { tab: "英语组", id: "3" },
  { tab: "文综组", id: "4" },
  { tab: "理综组", id: "5" },
];
import axios from "axios";
export default {
  data() {
    return {
      list: obj,
      lists: [], //数组
      listss: [], //第一
      changeRed: 0,
    };
  },
  methods: {
    reds: function (index) {
      this.changeRed = index;
    },
    jieshao(e){
      localStorage.setItem("jsid",e),
     this.$router.push("/Teacher")
    },
    index() {
      this.$router.push("/");
    },
    center(){
    this.$router.push("/center");
    },
    tab(a) {
      let that = this;
      console.log(a);
      axios.post("/Ranking/index?subject_id=" + a).then((res) => {
        that.lists = res.data.data;
        that.listss = res.data.data[0];
      });
    },
    
  },
  created() {
    let that = this;
    axios.post("/Ranking/index").then((res) => {
      that.lists = res.data.data;
      that.listss = res.data.data[0];
    });
  },
};
</script>



